<template>
	<div class="AnalystInfo">
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="asynData" v-if="analysInfo">
			<div class="itemBlock">
				<div class="itemContent">
					<div class="analystInfo" >
						<img class="pic" v-lazy="analysInfo.img" alt="" />
						<div class="introduceDetail" v-if="analysInfo.introduce">
							{{ analysInfo.introduce }}
							<div class="btnMore" v-on:click="moreInfoBtn">
								<span>查看更多</span>
							</div>
						</div>
						<a class="analysisBtn" :href="analysInfo.id"><span class="btnText">给他投票</span></a>
						<ul class="shareList">
							<li v-clipboard:copy="analysInfo.qq" v-clipboard:success="onCopy" v-clipboard:error="onError" type="QQ" v-if="analysInfo.qq">
								<img src="../assets/img/dtrkc@2x.png" alt="" />
							</li>
							<li v-clipboard:copy="analysInfo.weixin" v-clipboard:success="onCopy" v-clipboard:error="onError" type="微信" v-if="analysInfo.weixin">
								<img src="../assets/img/gfds@2x.png" alt="" />
							</li>
							<li v-clipboard:copy="analysInfo.email" v-clipboard:success="onCopy" v-clipboard:error="onError" type="邮箱" v-if="analysInfo.email">
								<img src="../assets/img/oh@2x.png" alt="" />
							</li>
							<li v-if="analysInfo.phone">
								<a v-bind:href="'tel:' + analysInfo.phone"><img src="../assets/img/okij@2x.png" alt="" /></a> 
							</li>
						</ul>
						
					</div>
				</div>
			</div>
			<div class="introduceBlock" v-lazy-container="{ selector: 'img' }" style="margin-bottom:0px;">
				<div class="introduceContent tableBorder" v-for="item in analysInfo.message">
					<table border="0" cellspacing="0" cellpadding="0"><tbody><tr>
						<td class="MessageDetail">
							<p class="info">{{ item.message }}</p>
							<p class="MessageTime">{{ item.created_time }}</p>
						</td>
						<td class="itemMessage">
							<img class="MessageIco" v-bind:data-src="item.img" alt="" />
						</td>
					</tr></tbody></table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import headercontent from './header'
	import axios from 'axios'
	export default {
  		name: 'AnalystInfo',
  		components:{headercontent},
  		data() {
			return {
				headerTitle: "专栏作家",
				analysInfo:""
			}
		},
  		mounted() {
			this.init();
		},
		methods: {
			init(){
				var _this = this;
				var _id = _this.$route.params.id;
				var domain = _this.$store.state.domain;
				axios.get(domain+'analyst_introduce/'+ _id).then(function(res) {
					var resData = res.data.data;
					console.log(resData);
					_this.analysInfo = resData;
					_this.$nextTick(()=>{ 
				    var obj = $(".introduceDetail");
				    if(obj.height() > 50){
				    	obj.css("height","64px");
				    }else{
				    	$(".btnMore").hide();
				    }
				   });
				}).catch(function(error) {
					console.log(error);
				});
			},
			moreInfoBtn(){
				$(".introduceDetail").css("height","auto");
				$(".btnMore").hide();
			},
			onCopy(e){
			  var _this = this;
			  console.log(e.trigger.type);
		      $(".usualMessage").empty().append("您已成功复制了分析师的" + e.trigger.type + "<br><span class='voteInfo'>" + e.text + "</span><br>" + "快去联系分析师吧~");
		      _this.openDialog();
		      
		    },
		    onError(e) {
		      var _this = this;
		      $(".usualMessage").empty().append("<span style='color:red'>无法复制文本,请升级浏览器</span>");
		      _this.openDialog();
		    },
		    openDialog(){
				$(".usualMessage").show();
				$(".dialogTitle").empty().append("系统消息");
				$(".dialogMask").fadeIn();
    			$(".divDialog").fadeIn();
			},
		}
	}
</script>

<style>
	.analystInfo {text-align:center;position: relative;}
	.analystInfo .pic {width:110px;border-radius: 50%;}
	.analystInfo .introduceDetail { font-size: 1.2em; margin: 10px; line-height: 20px; overflow: hidden; position: relative;color:#666;}
	.btnMore {position: absolute; bottom: 0px; width: 100%; background: rgba(255, 255, 255, 0.95); height: 25px;color:#999;text-align:center;}
	.btnMore span {background: url('../assets/img/bnn@2x.png') no-repeat center right; background-size: contain; padding-right: 25px;}
	.analysisBtn { border: 1px solid #f5492d; color: #f5492d; display: block; height: 30px; line-height: 30px; font-size: 1.4em; width: 70%; margin: 10px auto;border-radius: 8px;;}
	.analysisBtn span {background: url('../assets/img/dtftyu@2x.png') no-repeat center left; background-size: contain; padding-left: 30px;}
	.shareList {margin: 20px 0 15px;}
	.shareList li {display: inline-block;margin:0px 5px;}
	.shareList li img {height:30px;}
	.AnalystInfo .tableBorder tr td {vertical-align: top;}
	td.itemMessage,.itemMessage .MessageIco {width:75px;}
	.itemMessage .MessageIco {display: block;}
	.MessageTime {margin-top:10px;color:#999;}
	.MessageDetail .info {padding-right:5px;max-height:55px;overflow: hidden;color:#333;min-height:45px;}
</style>